<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to right, #fae7b8, #f2a02a);
			}
			#tupian{
				width: 600px;
				height:600px;
				border: 0px solid #ff00fc;
				position: fixed;
				left:200px;
				top: 100px;
			}
			#tupian img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 5px solid ff00fc;
				box-shadow: 0px 0px 60px white;  /*边框阴影*/
				animation:myfirst 10s infinite;
			}
			@keyframes myfirst{
				    from{
				      transform:rotate(0deg);
					  border: 5px solid aqua;
				    }
				    to{
				      transform:rotate(360deg);
					  border: 5px solid red;
				    }
			}
			#wenzi{
				font-size: 5.25rem;
				font-family: 华文行楷;
				position: fixed;
				left:150px;
				top: 800px;
			}
			#wenzi:hover{
				
				color: red;
				font-size: 6.25rem;
				font-family: 宋体;				
			}
			#tupian img:hover{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 5px solid aqua;
				box-shadow: 0px 0px 100px red;  /*边框阴影*/				
			}
			
			/*背景跳动音乐*/
			#big{
				width:80%;
				height: 200px;
				border: 0px solid black;
				position: fixed;
				left:100px;
				top: 1065px;
				display: flex;
				align-items: flex-end;
			}
			#a1{				
				width: 100px;
				height: 200px;
				background-color: red;				
				margin-right: 10px;				
				float: left;
				animation: a1 1.5s infinite;
			}
			@keyframes a1{
				0%{height: 200px;}
				100%{height: 100px;}
			}
			#a2{
				width: 100px;
				height: 150px;
				background-color: green;
				margin-right: 10px;
				float: left;
				animation: a2 1.2s infinite;
			}
			@keyframes a2{
				0%{height: 150px;}
				100%{height: 80px;}
			}
			#a3{
				width: 100px;
				height: 180px;
				background-color: blueviolet;
				margin-right: 10px;
				float: left;
				animation: a3 1.7s infinite;
			}
			@keyframes a3{
				0%{height: 180px;}
				100%{height: 100px;}
			}
			#a4{
				width: 100px;
				height: 210px;
				background-color: hotpink;
				margin-right: 10px;
				float: left;
				animation: a4 2s infinite;
			}
			@keyframes a4{
				0%{height: 210px;}
				100%{height: 100px;}
			}
			#button{
				width: 80px;
				height: 50px;
				border: 0;
				border-radius: 50px;
				font-size: 20px;
				background-color:#fae7b8 ;
			}
		</style>
	</head>
	<body>
		<a href="../index.html"><button id="button" type="button"><返回</button></a>
		<div id="tupian">
			<img src="../img/tuijian3.jpg" >
		</div>
		<div id="wenzi">
			&#127932;胖虎 | <小宇>
		</div>
		<audio src="../video/胖虎%20-%20小宇%20(片段).mp3" autoplay="autoplay" loop="loop">			
		</audio>
		<!--背景调动音乐-->
		<div id="big">
			<div id="a1"></div>
			<div id="a2"></div>
			<div id="a3"></div>
			<div id="a4"></div>
			<div id="a1"></div>
			<div id="a2"></div>
			<div id="a3"></div>
			<div id="a4"></div>
		</div>
		

	</body>
</html>
